<template>
  <HModal @cancel="close" @ok="handleOK" :width="1200" :height="800"
          :defaultFullScreen="true" okText="确定" cancelText="取消"
          title="预览" :visible="visible">
    <template #title>
      <div style="display: flex; align-items: center; justify-content: center; padding: 10px;">
      <span style="margin-left: 10px">
        视图:
         <a-select v-model="viewId" style="width: 200px;">
          <a-select-option v-for="item in formDefinition && formDefinition.views || []"
                           :value="item.id">
            {{ item.viewName }}
          </a-select-option>
        </a-select>
      </span>
        <span style="margin-left: 10px">
      权限:
      <a-select v-model="actionId" style="width: 200px;" @change="actionChange">
        <a-select-option v-for="item in formDefinition && formDefinition.actions || []"
                         :value="item.id">
          {{ item.actionName }}
        </a-select-option>
      </a-select>
    </span>
      </div>

    </template>
    <div class="form-engine-wrapper">
      <div>
        <FormEngine v-model="formModel" :view="viewId" ref="formEngine"
                    :action="actionId" :formDefinition="formDefinition"/>
      </div>
    </div>
  </HModal>
</template>
<script>
import {HModal} from 'h-flow/dist/h-flow.umd';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import FormEngine from '@/components/hhd/design/FormEngine/FormEngine.vue';

export default {
  name: 'FormPreview',
  components: {
    FormEngine,
    HModal
  },
  data() {
    return {
      actionId: undefined,
      formModel: undefined,
      viewId: undefined,
      visible: false,
      formDefinition: createFormDefinition(),
    };
  },
  methods: {
    setData(formDefinition) {
      this.formDefinition = formDefinition;
      this.open();
    },
    open() {
      this.formModel = undefined;
      this.visible = true;
      this.viewId = this.formDefinition.views[0].id;
      this.actionId = this.formDefinition.actions[0].id;
    },
    actionChange() {
      this.$nextTick(() => {
        this.$refs.formEngine.resetAction();
      });
    },
    close() {
      this.visible = false;
      this.formDefinition = undefined;
      this.formModel = undefined;
      this.actionId = undefined;
      this.viewId = undefined;
    },
    handleOK() {
      this.close();
    },
  }
};
</script>